<template>
  <div>
    <div class="top">
      <div class="userinfo">
        <!-- avatarUrl是变量声明变量在前加 ：（v-bind的缩写）是vue的语法 -->
        <!-- <img v-bind:src="userinfo.avatarUrl"> -->
        <img :src="userinfo.avatarUrl" />
      </div>
      <div class="name">
        <!-- nicName是变量用{{}} -->
        <label>{{userinfo.nickName}}</label>
        <!-- <p class="notice">{{ quote }}</p> -->
      </div>
    </div>
    <div class="contain">
      <div class="row" @click="trip">
        <label class="left"> <img  class="timg" src="https://my-wechatl.oss-cn-beijing.aliyuncs.com/lvxing(1).png"> </label>
        <label class="name">&nbsp;&nbsp;我的旅行</label>
        <lable class="right"></lable>
      </div>

      <div class="row" @click="collect">
        <label class="left"> <img  class="timg" src="https://my-wechatl.oss-cn-beijing.aliyuncs.com/dianzan_1.png"> </label>
        <label class="name">&nbsp;&nbsp;收藏</label>
        <lable class="right"></lable>
      </div>
      <!-- 跳转页面 -->
      <div class="row" @click="showFeedback">
        <label class="left"> <img  class="timg" src="https://my-wechatl.oss-cn-beijing.aliyuncs.com/xinxi.png"> </label>
        <label class="name">&nbsp;&nbsp;意见反馈</label>
        <lable class="right"></lable>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userinfo: {},
      quote: "",
    };
  },
  methods: {
    // 随机语句显示
    rankArray() {
      // Math.random()生成0-1之间的小数，比如：0.8765787
      var a = Math.random() + "";
      // 第6个小数0-9的随机数
      var rank1 = a.charAt(5);
      var quotes = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
      this.quote = quotes[rank1];
    },

    // 意见反馈页面跳转
    showFeedback() {
      wx.navigateTo({
        // 绝对路径前要加 /
        url: "/pages/feedback/main",
      });
    },

    collect(){
      wx.navigateTo({
        // 绝对路径前要加 /
        url: "/pages/collect/main",
      });
    },
    trip(){
   wx.navigateTo({
        // 绝对路径前要加 /
        url: "/pages/tour/main",
      });
    }
  },
  //methods外的是函数
  onShow() {
    this.rankArray();
  },

  mounted(){
      const userinfo =wx.getStorageSync('userinfo')
      if(userinfo.openId){
          this.userinfo = userinfo
          console.log("this.userinfo",this.userinfo)
      }
  }
};
</script>

<style lang="scss">
.contain {
  margin-top: 10px;
  background: #ffffff;
  font-size: 15px;
  .row {
    padding: 0px 18px;
    border-bottom: 1px #e8e8e8 solid;
    height: 55px;
    line-height: 55px;
    .timg {
      float: left;
      width: 25px;
      height: 25px;
      padding-top: 16px;
    }
    .name {
      float: left;
    }
  }
  .right {
    float: right;
    color: #c8c8c8;
    line-height: 55px;
  }
  .left {
    width: 80%;
  }
}

.top {
  height: 80px;
  width: 100%;
  background: #ea5149;
  padding-top: 30px;
  display: block;
  .userinfo {
    padding-bottom: 5px;
    float: left;
    img {
      width: 120rpx;
      height: 120rpx;
      margin: 10rpx;
      border-radius: 1px;
      border: 1px #d0d0d0 solid;
    }
  }
  .name {
    padding-top: 30px;
    padding-left: 5px;
    color: #ffffff;
    font-size: 16px;
    float: left;
    .underline {
      border: 1px solid #ffffff;
      border-radius: 5px;
      text-align: center;
    }
    .notice {
      color: #d8d8d8;
      font-size: 12px;
    }
    .a-line {
      background: #ea5149;
      border: none;
      display: inline;
      font-size: 16px;
      color: #ffffff;
      text-decoration: underline;
    }
  }
}
</style>